
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
		  
	  #thunderFighter{
		  width: 50px;
		  height: 50px;	
		  position: absolute;
		  top: 500px;
		  left: calc(50vw - 25px);
		  background-image: url('./img/雷霆战机.png');
		    background-repeat: no-repeat;
			
			background-size:50px 50px;
	  }
	  
  </style>
</head>
<body>

 
 
 
	
	<!-- 雷霆战机 -->
	<div id="thunderFighter">
		
	</div>
 
 

  <script src="./子弹.js"></script>
  <script src="./怪物.js"></script>
 <script>
	
	var thunderFighter=document.querySelector('#thunderFighter') //获取雷霆战机
	var thunderFighterInfo={ //获取雷霆战机基本信息
		offsetTop:thunderFighter.offsetTop,//距离顶部的位置
		offsetLeft:thunderFighter.offsetLeft,//距离左侧的位置
		width:thunderFighter.offsetWidth,
		height:thunderFighter.offsetHeight
	}
	var mouseInfo={
		clientX:'',
		clientY:''
	}
	
	var monsterList=[] //保存生成的怪物
	
	// console.dir(thunderFighter)
	
	var ifShot=null //控制是否发射
	
	generateMonster(3)//初始化怪物数量 为3只
	
	
	function shotBullet(){//发射子弹
		
			ifShot=	setTimeout(()=>{
				
				//获取最新战机位置
				thunderFighterInfo={ //获取雷霆战机基本信息
					offsetTop:thunderFighter.offsetTop,//距离顶部的位置
					offsetLeft:thunderFighter.offsetLeft,//距离左侧的位置
					width:thunderFighter.offsetWidth,
					height:thunderFighter.offsetHeight
				}
				 new Bullet({thunderFighterInfo,mouseInfo})
				 shotBullet()
			},200)
	
	
	
	}
	
	
	function generateMonster(number){//初始生成3只怪物
		for(let i=0;i<number;i++){
			monsterList.push(new Monster())
		}
		
	}
	
	document.addEventListener('mousemove',(e)=>{//监听鼠标移动

		mouseInfo.clientX=e.clientX
		mouseInfo.clientY=e.clientY
		
		
		
		//将雷霆战机的朝向改为鼠标朝向
		let angle = Math.atan2(e.pageX-thunderFighter.getBoundingClientRect()
		            .left-thunderFighter.clientLeft/2,e.pageY-thunderFighter.getBoundingClientRect().top
		            -thunderFighter.clientTop/2);
		            let rot = angle * 180 / Math.PI * -1  ;
		            thunderFighter.style.transform = `rotate(${rot}deg)`;

	})
	
	document.addEventListener('mousedown',(e)=>{//监听鼠标按下
	mouseInfo.clientX=e.clientX
	mouseInfo.clientY=e.clientY
	
	
		
				shotBullet()
			
		
		
		
	})
	 
	 
	 
	 document.addEventListener('mouseup',()=>{//监听鼠标抬起
		 clearTimeout(ifShot)
	 })
	 
	 

	 
	 //监听键盘按下事件
	 document.onkeydown=(e)=>{
		 if(event.keyCode==65){//按下了A键
				  
			 requestAnimationFrame(()=>{
				
			 	thunderFighter.style.left=(thunderFighter.offsetLeft-1)+'px'
				
			 })
		 }
		 if(event.keyCode==68){//按下了D键
	requestAnimationFrame(()=>{
					
		thunderFighter.style.left=(thunderFighter.offsetLeft+1)+'px'
					
	})
			 
		 }
		 if(event.keyCode==83){//按下了S键
			requestAnimationFrame(()=>{
							
				thunderFighter.style.top=(thunderFighter.offsetTop+1)+'px'
							
			})
			
		 }
		 if(event.keyCode==87){//按下了W键
			requestAnimationFrame(()=>{
							
				thunderFighter.style.top=(thunderFighter.offsetTop-1)+'px'
							
			})
		 	
		 }
	 }
	 
	
	 
 </script>
</body>
</html>